<script setup lang="ts">
import {onMounted, ref} from "vue";
// import {invoke} from "@tauri-apps/api/core";
// import {platform} from '@tauri-apps/plugin-os';
import {ElMessage, ElConfigProvider} from 'element-plus';
import {useRouter} from 'vue-router'

const router = useRouter()

const headerTitle = ref<string>("系统");

const asideToolClickToSystem = async (toolName: string) => {
  // const greet = await invoke('greet', {name: 'world'});
  // const osInfo = platform();
  // const cpuUsage = await invoke('cpu_usage');

  // const cpuUsage = await invoke('cpu_usage');
  headerTitle.value = toolName;
  // const currentPlatform = platform();
  // console.log(currentPlatform);
  // ElMessage(greet as string);
  ElMessage('路由切换至' + toolName);
  await router.push('/');
};

const asideToolClickToDownload = (toolName: string) => {
  headerTitle.value = toolName;
  ElMessage('路由切换至' + toolName);
  router.push('/Download');
};

const asideToolClickToSetting = (toolName: string) => {
  headerTitle.value = toolName;
  ElMessage('路由切换至' + toolName);
  router.push('/Setting');
};

onMounted(() => {

})
</script>

<template>
  <el-config-provider>
    <div class="main_contain">
      <div class="row">
        <div class="aside">
          <div class="aside_tool" @click="asideToolClickToSystem('系统')">
            <div class="aside_tool_icon">
              <span class="icon iconfont icon-yunzhuomian"></span>
            </div>
            <div class="aside_tool_desc">系统</div>
          </div>
          <div class="aside_tool" @click="asideToolClickToDownload('下载')">
            <div class="aside_tool_icon">
              <div class="aside_tool_icon">
                <span class="icon iconfont icon-xiazai"></span>
              </div>
            </div>
            <div class="aside_tool_desc">下载</div>
          </div>
          <div class="aside_tool" @click="asideToolClickToDownload('工作流')">
            <div class="aside_tool_icon">
              <div class="aside_tool_icon">
                <span class="icon iconfont icon-xiazai"></span>
              </div>
            </div>
            <div class="aside_tool_desc">工作流</div>
          </div>
          <div class="aside_space" style="flex: 1">

          </div>
          <div class="aside_tool" @click="asideToolClickToSetting('设置')">
            <div class="aside_tool_icon">
              <div class="aside_tool_icon">
                <span class="icon iconfont icon-shezhi"></span>
              </div>
            </div>
            <div class="aside_tool_desc">设置</div>
          </div>
        </div>
        <div class="contain">
          <div class="header">{{ headerTitle }}</div>
          <router-view/>
        </div>
      </div>
    </div>
  </el-config-provider>


</template>

<style scoped>
.main_contain {
  background-size: cover;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: unset;
  width: 100%;
  height: 100vh; /* 使用视口高度 */
  display: flex;

  .row {
    height: 100%;
    width: 100%;
    display: flex;

    .aside {
      width: 5rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f2f4f7;

      .aside_tool {
        border-radius: 0.25rem;
        height: 4rem;
        width: 4rem;
        display: flex;
        flex-direction: column;
        align-items: center;

        margin-top: 0.25rem;

        .aside_tool_icon {
          margin-top: 0.125rem;
        }

        .aside_tool_desc {
          margin-top: 0.5rem;
          -webkit-user-select: none; /* Safari */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* IE10+/Edge */
          user-select: none; /* 标准语法 */
          cursor: default; /* 设置光标为默认箭头 */
        }
      }

      .aside_tool:hover {
        background-color: #eaebef;
      }
    }

    .contain {
      width: 100%; /* 占据 contain 的全部宽度 */

      .contain_main {
        width: 300px;
        height: 300px;
        background-color: rgb(188, 227, 236);
      }

      .box {
        width: 100%; /* 占据 contain 的全部宽度 */
        height: 300px;
        background-color: rgb(188, 227, 236);
      }
    }
  }


}
</style>
<style>
:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}


</style>